<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标的管理</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-size: 0.875rem; /* 14px */
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
            font-size: 0.875rem; /* 14px */
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease-in-out;
            font-size: 0.875rem; /* 14px */
        }
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
        }
        .table {
            font-size: 0.8125rem; /* 13px */
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .btn {
            font-size: 0.8125rem; /* 13px */
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        .pagination .page-link {
            color: #0d6efd;
            font-size: 0.8125rem; /* 13px */
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            font-size: 0.875rem; /* 14px */
        }
        .modal-header {
            background-color: #f8f9fa;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        h2 {
            color: #2c3e50;
            font-weight: 600;
            font-size: 1.25rem; /* 20px */
        }
        .form-control, .form-select {
            border-radius: 8px;
            font-size: 0.875rem; /* 14px */
        }
        .form-label {
            font-size: 0.8125rem; /* 13px */
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-bank"></i> 个人投资管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">

                    <li class="nav-item">
                        <a class="nav-link active" href="fund.html">标的管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="portfolio.html">投资组合</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="transaction.html">交易记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentGoal.html">投资目标</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentDiary.html">投资日记</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="riskAssessment.html">风险评估</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="taxCalculation.html">税务计算</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mt-5">
        <div class="card mb-3">
            <div class="card-header">查询条件</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <select class="form-select" id="searchFundType">
                            <option value="">请选择标的类型</option>
                            <option value="1">稳健灵活</option>
                            <option value="2">黄金</option>
                            <option value="3">基金</option>
                            <option value="4">股票</option>
                            <option value="5">ETF</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <select class="form-select" id="searchSubType">
                            <option value="">请选择标的子类型</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <input type="text" class="form-control" id="searchFundCode" placeholder="请输入代码">
                    </div>
                    <div class="col-md-3 mb-3">
                        <input type="text" class="form-control" id="searchFundName" placeholder="请输入名称">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-center">
                        <button class="btn btn-primary me-2" id="fetchFundsButton"><i class="bi bi-search"></i>查询</button>
                        <button class="btn btn-primary me-2" id="exportExcelButton">导出</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <div class="card mb-3">
            <div class="d-flex justify-content-between">
                <div>
                    <button id="addFundButton" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#addFundModal"><i class="bi bi-plus-circle"></i>新增标的</button>
                    <button id="syncNetValuesButton" class="btn btn-primary">净值同步</button>
                </div>
                <div>
                    <select class="form-select d-inline-block w-auto" id="timeRange">
                        <option value="all">全部</option>
                        <option value="1w">最近1周</option>
                        <option value="1m">最近1个月</option>
                        <option value="3m">最近3个月</option>
                        <option value="6m">最近6个月</option>
                        <option value="1y">最近1年</option>
                        <option value="2y">最近2年</option>
                        <option value="3y">最近3年</option>
                        <option value="5y">最近5年</option>
                    </select>
                </div>
            </div>
            <div class="card-header">
            </div>
            <div class="card-body">
                <table id="fundTable" class="table table-striped table-bordered">
                    <thead id="fundTableHeader"></thead>
                    <tbody id="fundTableBody"></tbody>
                </table>
            </div>
        </div>

        <!-- 分页 -->
        <div id="pagination" class="d-flex justify-content-between">
            <div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <select class="form-select" id="itemsPerPage">
                                <option value="10" selected>10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </li>
                        <li class="page-item" id="prevPage">
                            <a class="page-link" tabindex="-1" aria-disabled="true" id="pPage">上一页</a>
                        </li>
                        <li class="page-item">
                            <span class="page-link">
                                第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页
                            </span>
                        </li>
                        <li class="page-item" id="nextPage">
                            <a class="page-link" id="nPage">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 新增模态框 -->
    <div class="modal fade" id="addFundModal" tabindex="-1" aria-labelledby="addFundModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addFundModalLabel">新增</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addFundForm">
                        <div class="mb-3">
                            <label for="addFundCode" class="form-label">代码</label>
                            <input type="text" class="form-control" id="addFundCode" required>
                        </div>
                        <div class="mb-3">
                            <label for="addFundName" class="form-label">名称</label>
                            <input type="text" class="form-control" id="addFundName" required>
                        </div>
                        <div class="mb-3">
                            <label for="addFundType" class="form-label">标的类型</label>
                            <select class="form-select" id="addFundType" required>
                                <option value="">请选择</option>
                                <option value="1">稳健灵活</option>
                                <option value="2">黄金</option>
                                <option value="3">基金</option>
                                <option value="4">股票</option>
                                <option value="5">ETF</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="addSubType" class="form-label">标的子类型</label>
                            <select class="form-select" id="addSubType" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="addFrontEndPurchaseFee" class="form-label">前端申购费(%)</label>
                            <input type="number" step="0.0001" class="form-control" id="addFrontEndPurchaseFee">
                        </div>
                        <div class="mb-3">
                            <label for="addAnnualManagementFee" class="form-label">运作管理费[每年](%)</label>
                            <input type="number" step="0.0001" class="form-control" id="addAnnualManagementFee">
                        </div>
                        <div class="mb-3">
                            <label for="addBrokerCommissionRate" class="form-label">券商佣金费率[双向](%)</label>
                            <input type="number" step="0.0001" class="form-control" id="addBrokerCommissionRate">
                        </div>
                        <div class="mb-3">
                            <label for="addFreeFeeMinDays" class="form-label">免手续费最低持有天数</label>
                            <input type="number" class="form-control" id="addFreeFeeMinDays" min="0" value="0">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveAddFund">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div class="modal fade" id="editFundModal" tabindex="-1" aria-labelledby="editFundModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editFundModalLabel">编辑</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editFundForm">
                        <input type="hidden" id="editFundId">
                        <div class="mb-3">
                            <label for="editFundCode" class="form-label">代码</label>
                            <input type="text" class="form-control readonly-field" id="editFundCode" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="editFundName" class="form-label">名称</label>
                            <input type="text" class="form-control" id="editFundName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editFundType" class="form-label">标的类型</label>
                            <select class="form-select" id="editFundType" required>
                                <option value="">请选择</option>
                                <option value="1">稳健灵活</option>
                                <option value="2">黄金</option>
                                <option value="3">基金</option>
                                <option value="4">股票</option>
                                <option value="5">ETF</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editSubType" class="form-label">标的子类型</label>
                            <select class="form-select" id="editSubType" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editFrontEndPurchaseFee" class="form-label">前端申购费(%)</label>
                            <input type="number" step="0.0001" class="form-control" id="editFrontEndPurchaseFee">
                        </div>
                        <div class="mb-3">
                            <label for="editAnnualManagementFee" class="form-label">运作管理费[每年](%)</label>
                            <input type="number" step="0.0001" class="form-control" id="editAnnualManagementFee">
                        </div>
                        <div class="mb-3">
                            <label for="editBrokerCommissionRate" class="form-label">券商佣金费率[双向](%)</label>
                            <input type="number" step="0.0001" class="form-control" id="editBrokerCommissionRate">
                        </div>
                        <div class="mb-3">
                            <label for="editFreeFeeMinDays" class="form-label">免手续费最低持有天数</label>
                            <input type="number" class="form-control" id="editFreeFeeMinDays" min="0">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveEditFund">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--详情模态框 -->
    <div class="modal fade" id="detailFundModal" tabindex="-1" aria-labelledby="detailFundModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailFundModalLabel">详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h6>基本信息</h6>
                            <p><strong>代码:</strong> <span id="detailFundCode"></span></p>
                            <p><strong>名称:</strong> <span id="detailFundName"></span></p>
                            <p><strong>标的类型:</strong> <span id="detailFundType"></span></p>
                            <p><strong>标的子类型:</strong> <span id="detailSubType"></span></p>
                            <p><strong>前端申购费(%):</strong> <span id="detailFrontEndPurchaseFee"></span></p>
                            <p><strong>运作管理费[每年](%):</strong> <span id="detailAnnualManagementFee"></span></p>
                            <p><strong>券商佣金费率[双向](%):</strong> <span id="detailBrokerCommissionRate"></span></p>
                            <p><strong>免手续费最低持有天数:</strong> <span id="detailFreeFeeMinDays"></span></p>
                        </div>
                        <div class="col-md-6">
                            <h6>净值信息</h6>
                            <p><strong>最新单位净值:</strong> <span id="detailNetValue"></span></p>
                            <p><strong>创建时间:</strong> <span id="detailCreatedTime"></span></p>
                            <p><strong>最后更新时间:</strong> <span id="detailUpdatedTime"></span></p>
                            <p><strong>状态:</strong> <span id="detailStatus"></span></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <h6>历史净值与盈亏比图表</h6>
                            <canvas id="netValueChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <h6>各时段表现</h6>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>时段</th>
                                            <th>净值</th>
                                            <th>最大净值</th>
                                            <th>最小净值</th>
                                            <th>同比</th>
                                            <th>最大同比</th>
                                            <th>最小同比</th>
                                            <th>盈亏比</th>
                                        </tr>
                                    </thead>
                                    <tbody id="detailPerformanceTable">
                                        <!-- 数据将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="fund.js?v=1.0.0"></script>
</body>
</html>